// Tab icons used with permission from Drew Wilson
// http://pictos.drewwilson.com/
// Pictos icons are (c) 2010 Drew Wilson

@import '../global';

/**
 * @class Ext.tab.Bar
 */

/**
 * @var {boolean} $include-tabbar-uis Optionally disable separate tabbar UIs (light and dark).
 */
$include-tabbar-uis: $include-default-uis !default;

/**
 * @var {boolean} $include-top-tabs
 * Optionally exclude top tab styles by setting to false.
 */
$include-top-tabs: true !default;

/**
 * @var {boolean} $include-bottom-tabs
 * Optionally exclude bottom tab styles by setting to false.
 */
$include-bottom-tabs: true !default;

/**
 * @var {color} $tabs-light
 * Base color for "light" UI tabs.
 */
$tabs-light: desaturate($base-color, 10%) !default;

/**
 * @var {color} $tabs-light-active
 * Active color for "light" UI tabs.
 */
$tabs-light-active: lighten(saturate($active-color, 20%), 20%) !default;

/**
 * @var {color} $tabs-dark
 * Base color for "dark" UI tabs.
 */
$tabs-dark: darken($base-color, 20%) !default;

/**
 * @var {color} $tabs-dark-active
 * Active color for "dark" UI tabs.
 */
$tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default;

/**
 * @var {string} $tabs-bar-gradient
 * Background gradient style for tab bars.
 */
$tabs-bar-gradient: $base-gradient !default;

/**
 * @class Ext.tab.Tab
 */

/**
 * @var {string} $tabs-bottom-radius
 * Border-radius for bottom tabs.
 */
$tabs-bottom-radius: .25em !default;

/**
 * @var {string} $tabs-bottom-icon-size
 * Icon size for bottom tabs
 */
$tabs-bottom-icon-size: 1.65em !default;

/**
 * @var {string} $tabs-bottom-active-gradient
 * Background gradient style for active bottom tabs.
 */
$tabs-bottom-active-gradient: $base-gradient !default;

/**
 * @var {boolean} $include-tab-highlights
 * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging,
 * non-performant browsers, or minimalist designs.
 */
$include-tab-highlights: $include-highlights !default;

// Private

$tabs-top-height: $global-row-height - .8em;

$tabs-top-icon-size: $tabs-top-height - .6em;

/**
 * Includes default tab styles.
 *
 * @member Ext.tab.Bar
 */
@mixin sencha-tabs {
  @if $include-top-tabs {
    @include sencha-top-tabs;
  }
  @if $include-bottom-tabs {
    @include sencha-bottom-tabs;
  }

  @if $include-tabbar-uis {
    @include sencha-tabbar-ui('light', $tabs-light, $tabs-bar-gradient, $tabs-light-active);
    @include sencha-tabbar-ui('dark', $tabs-dark, $tabs-bar-gradient, $tabs-dark-active-color);
    @include sencha-tabbar-ui('neutral', $neutral-color, $tabs-bar-gradient, darken($neutral-color, 40));
  }

  // Rules for all tabs
  .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled .x-button-icon {
    @include opacity(.5);
  }
  .x-tab.x-draggable {
    @include opacity(.7);
  }

  .x-tab {
    z-index: 1;
    -webkit-user-select: none;
    overflow: visible !important;

    .x-button-label {
      overflow: visible !important;
    }
  }
}


@mixin sencha-top-tabs {
  .x-tabbar.x-docked-top {
    border-bottom-width: .1em;
    border-bottom-style: solid;
    height: $global-row-height;
    padding: 0 .8em;

    .x-tab {
      position: relative;
      padding: (($tabs-top-height - 1em) / 2) .8em;
      height: $tabs-top-height;
      min-width : 3.3em;
      @if $include-border-radius { @include border-radius($tabs-top-height / 2); }

      .x-button-label {
        font-size              : .8em;
        line-height            : 1.2em;
        text-rendering         : optimizeLegibility;
        -webkit-font-smoothing : antialiased;
      }

      .x-badge {
        font-size : .6em !important;
        top       : -0.5em;
      }

      &.x-tab-icon {
        padding : (($tabs-top-height - 1em) / 2) - .1em .8em;

        .x-button-icon {
          -webkit-mask-size : $tabs-top-icon-size;
          width             : $tabs-top-icon-size;
          height            : $tabs-top-icon-size;
          display           : inline-block;
          margin            : 0 auto;
          position          : relative;
        }

        .x-button-label {
          margin      : 0;
          margin-left : .3em;
          padding     : .1em 0 .2em 0;
          display     : inline-block;
          position    : relative;
          top         : -.4em;
        }
      }
    }
  }
}


@mixin sencha-bottom-tabs {
  .x-tabbar.x-docked-bottom {
    border-top-width: .1em;
    border-top-style: solid;
    height: 3em;
    padding: 0;

    .x-tab {
      @if $include-border-radius { @include border-radius($tabs-bottom-radius); }
      min-width: 3.3em;
      position: relative;
      padding-top: .2em;
      @include box-orient(vertical);

      .x-button-icon {
        -webkit-mask-size: $tabs-bottom-icon-size;
        width: $tabs-bottom-icon-size;
        height: $tabs-bottom-icon-size;
        display: block;
        margin: 0 auto;
        position: relative;
      }

      .x-button-label {
        margin: 0;
        padding: .1em 0 .2em 0;
        font-size: 9px;
        line-height: 12px;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
      }
    }
  }

  @if $include-default-icons {
    @include pictos-iconmask('bookmarks');
    @include pictos-iconmask('download');
    @include pictos-iconmask('favorites');
    @include pictos-iconmask('info');
    @include pictos-iconmask('more');
    @include pictos-iconmask('time');
    @include pictos-iconmask('user');
    @include pictos-iconmask('team');
  }
}

/**
 * Creates a theme UI for tabbar/tab components.
 *
 *     // SCSS
 *     @include sencha-button-ui('pink', #333, 'matte', #AE537A);
 *
 *     // JS
 *     var tabs = new Ext.tab.Panel({
 *        tabBar: {
 *          ui: 'pink',
 *          dock: 'bottom',
 *          layout: { pack: 'center' }
 *        },
 *        ...
 *     });
 *
 * @param {string} $ui-label The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {color} $bar-color Base color for the tab bar.
 * @param {string} $bar-gradient Background gradient style for the tab bar.
 * @param {color} $tab-active-color Background-color for active tab icons.
 *
 * @member Ext.tab.Bar
 */
@mixin sencha-tabbar-ui($ui-label, $bar-color, $bar-gradient, $tab-active-color) {
  .x-tabbar-#{$ui-label} {
    @include background-gradient($bar-color, $bar-gradient);
    border-top-color: darken($bar-color, 5%);
    border-bottom-color: darken($bar-color, 15%);

    .x-tab {
      @include color-by-background($bar-color, 40%);
      border-bottom: 1px solid transparent;
    }

    .x-tab-active {
      @include color-by-background($bar-color, 90%);
      border-bottom-color: lighten($bar-color, 3%);
    }

    .x-tab-pressed {
      @include color-by-background($bar-color, 100%);
    }
  }

  @if $include-bottom-tabs {
    .x-tabbar-#{$ui-label}.x-docked-bottom {
      .x-tab {
        @include bevel-by-background($bar-color);
        .x-button-icon {
          @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
        }
      }

      .x-tab-active {
        @include background-gradient(darken($bar-color, 5%), recessed);
        @include bevel-by-background(lighten($bar-color, 10%));

        @if ($include-tab-highlights) {
          @include box-shadow(darken($bar-color, 10%) 0 0 .25em inset);
        }

        .x-button-icon {
          @include background-gradient($tab-active-color, $tabs-bottom-active-gradient);
        }
      }
    }
  }

  @if $include-top-tabs {
    .x-tabbar-#{$ui-label}.x-docked-top {
      .x-tab-active {
        @include background-gradient(darken($bar-color, 5%), 'recessed');
        @include color-by-background(darken($bar-color, 5%));
      }
      .x-tab {
        .x-button-icon {
          @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
        }
      }
    }
  }
}
